<template>
  <el-card class="box-card knowledgeDetails">
    <div class="dflex">
      <div class="base-icon">
        <img :src="route.query.imageUrl" alt="" srcset="">
      </div>
      <div>
        <div class="f14666">{{ route.query.baseName }}</div>
        <div class="f12999">{{ route.query.desc }}</div>
      </div>
    </div>
  </el-card>
  <el-card class="box-card knowledgeUpdata">
    <div class="addFiles">
      <div>文件</div>
      <el-button v-if="d.knowledgeUpdataList.length" @click="dialogVisible = true" type="danger">
        + 添加文件
      </el-button>
    </div>

    <!-- 上传列表 -->
    <div v-if="d.knowledgeUpdataList.length" class="baseTable">
      <el-table :data="d.knowledgeUpdataList" style="width: 100%">
        <el-table-column prop="name" label="名称" width="800" />
        <el-table-column prop="size" label="大小" />
        <el-table-column prop="time" label="时间" />
        <el-table-column prop="t6" align="right" label="操作">
          <template #default="scope">
            <div class="dflex justify-content-end">
              <div class="base-del">
                <img @click="onDel(scope.row.name)" :src="del" alt="" srcset="">
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- end -->

    <!-- 无列表显示 -->
    <div class="knowledgeApp" v-if="!d.knowledgeUpdataList.length">
      <div>
        <img :src="NOF" alt="" srcset="">
      </div>
      <p class="f14999">尚未添加文件</p>
      <el-button @click="dialogVisible = true" type="danger">
        + 添加文件
      </el-button>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog v-model="dialogVisible" title="添加文件" width="600px">
      <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
        <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
        <img class="updataImg" :src="updata" alt="" srcset="">
        <div class="el-upload__text">
          点击或拖动文件到此处上传
        </div>
        <template #tip>
          <div class="el-upload__tip">
            最多上传 10 份 PDF、TXT或 DOCX 格式的文件。每个文件大小应小于 20MB。
          </div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" @click="dialogVisible = false">
            完成
          </el-button>
        </span>
      </template>
    </el-dialog>

  </el-card>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import NOF from '@/assets/docs/noF.svg'
import updata from '@/assets/docs/updata.svg'
import { ref, reactive } from 'vue'
// import { UploadFilled } from '@element-plus/icons-vue'
import del from "@/assets/docs/del.svg";
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const route = useRoute();

// mock
const d = reactive({
  knowledgeUpdataList: [
    {
      name: 'u1',
      size: '20k',
      time: '2023',
    },
    {
      name: 'u2',
      size: '20k',
      time: '2023',
    },
  ]
})

// 删除
const delFn = (p: string) => {
  let newList = d.knowledgeUpdataList.filter(e => e.name !== p)
  console.log(newList);

  d.knowledgeUpdataList = newList

}
const onDel = (e: string) => {
  console.log(e);

  ElMessageBox.confirm(
    '相关记忆体将永久删除，请谨慎操作！是否继续删除？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      delFn(e)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

</script>
<style lang="scss"  scoped>
.knowledgeDetails {
  margin-bottom: 20px;


  .base-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #F9E8E9;
    text-align: center;
    line-height: 55px;
    margin-right: 10px;
  }


}

.knowledgeUpdata {
  height: calc(100vh - 230px);

  .knowledgeApp {
    text-align: center;
    margin-top: 12%;
  }

  .el-upload__text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .el-upload__tip {
    font-size: 12px;
    font-weight: 400;
    color: #999;

  }

  .updataImg {
    margin: 10px 0;
  }

  .addFiles {
    display: flex;
    justify-content: space-between;
    align-content: center;
  }

  .baseTable {
    margin: 20px 0;
  }
}
</style>
